<template>
  <div class="module scrollbar">
    <div>
      <div class="chart-item-wrap" v-for="(item, i) in list" :key="item.label">
        <div class="title">
          <span>{{item.label}}</span>
          <svg-icon class="icon" icon-class="icon_stars"></svg-icon>
        </div>
        <div class="chart-item" :id="'bar-1-' + i"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import { realPx } from "@/utils/common";
export default {
  data() {
    return {
      list: [],
      myChartList: []
    };
  },
  mounted() {
    // 根据数据来渲染echarts
    this.list = [
      {
        label: "主机",
        rotate: 0,
        data: [
          { label: "服务器", value: 320 },
          { label: "小型机\n(IBM)", value: 360 },
          { label: "小型机\n(HP)", value: 300 }
        ]
      },
      {
        label: "存储",
        rotate: 0,
        data: [
          { label: "EMC", value: 7 },
          { label: "IBM", value: 6 },
          { label: "HDS", value: 9 }
        ]
      },
      {
        label: "数据库",
        rotate: 30,
        data: [
          { label: "Oracle", value: 22 },
          { label: "DBI", value: 12 },
          { label: "Informix", value: 18 },
          { label: "MySQL", value: 30 }
        ]
      },
      {
        label: "应用子系统",
        rotate: 20,
        data: [
          { label: "蜀信e", value: 22 },
          { label: "电子银\n行系统", value: 12 },
          { label: "统一\n支付", value: 18 },
          { label: "特色\n业务", value: 30 },
          { label: "PB", value: 18 },
          { label: "文件传\n输平台", value: 30 }
        ]
      }
    ];
    this.$nextTick(() => {
      this.renderEcharts();
      setTimeout(this.resize, 0);
    })
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    getOption(obj, i) {
      const xAxisData = obj.data.map(t => t.label);
      const yAxisData = obj.data.map(t => t.value);
      const yAxisData1 = yAxisData;
      const rotate = obj.rotate;
      const margin = i <= 1 ? realPx(50) : realPx(130);

      var option = {
        backgroundColor: "transparent",
        grid: {
          left: "15%",
          right: "5%",
          top: "10%",
          bottom: "25%"
        },
        xAxis: {
          data: xAxisData,
          //坐标轴
          axisLine: {
            lineStyle: {
              color: "rgba(107, 123, 176, 1)",
              width: realPx(10)
            }
          },
          // 坐标轴刻度
          axisTick: {
            length: realPx(20),
            alignWithLabel: true,
            lineStyle: {
              color: "rgba(107, 123, 176, 1)",
              width: realPx(10)
            }
          },
          //坐标值标注
          axisLabel: {
            interval: 0, // 显示全部标签
            show: true,
            align: "center",
            rotate,
            fontSize: realPx(86),
            margin,
            textStyle: {
              color: "rgba(167, 210, 237, 1)"
            }
          }
        },
        yAxis: {
          //坐标轴
          axisLine: {
            show: false
          },
          //坐标值标注
          axisLabel: {
            show: true,
            fontSize: realPx(86),
            margin: realPx(50),
            textStyle: {
              color: "rgba(167, 210, 237, 1)"
            }
          },
          //分格线
          splitLine: {
            lineStyle: {
              type: "dotted",
              width: realPx(10),
              color: "rgba(107, 123, 176, 1)"
            }
          }
        },
        series: [
          {
            name: "a",
            tooltip: {
              show: false
            },
            type: "bar",
            barWidth: realPx(120),
            itemStyle: {
              normal: {
                color: "rgba(0, 237, 254, 1)"
              }
            },
            data: yAxisData,
            barGap: 0
          },
          {
            type: "bar",
            barWidth: realPx(24),
            itemStyle: {
              normal: {
                color: "rgba(0, 156, 167, 1)"
              }
            },
            barGap: 0,
            data: yAxisData1
          },
          {
            name: "b",
            tooltip: {
              show: false
            },
            type: "pictorialBar",
            itemStyle: {
              borderWidth: realPx(60),
              borderColor: "rgba(0, 156, 167, 1)",
              color: "rgba(0, 156, 167, 1)"
            },
            symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
            symbolSize: [realPx(30), realPx(12)],
            symbolOffset: [0, realPx(-42)],
            //symbolRotate: -5,
            symbolPosition: "end",
            data: yAxisData1,
            z: 3
          },
          {
            name: "c",
            tooltip: {
              show: false
            },
            type: "pictorialBar",
            itemStyle: {
              borderWidth: realPx(24),
              borderColor: "rgba(0, 156, 167, 1)",
              color: "rgba(0, 156, 167, 1)"
            },
            symbol: "path://M 0,-4 l -4,4 l 4,0 z",
            symbolSize: [realPx(24), realPx(12)],
            symbolOffset: [realPx(44), realPx(-24)],
            //symbolRotate: -5,
            symbolPosition: "end",
            data: yAxisData1,
            z: 4
          }
        ]
      };
      return option;
    },
    renderEcharts() {
      this.myChartList = [];
      for (let i = 0; i < this.list.length; i++) {
        var myChart = echarts.init(document.getElementById("bar-1-" + i));
        let option = this.getOption(this.list[i], i);
        myChart.setOption(option);
        this.myChartList.push(myChart);
      }
    },
    resize() {
      for (let i = 0; i < this.myChartList.length; i++) {
        this.myChartList[i].resize();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.module {
  width: 100%;
  height: 100%;
  font-size: 0;
  .chart-item-wrap {
    display: inline-block;
    width: 232px;
    height: 136px;
    .title {
      font-size: 12.3px;
      color: #fff;
      height: 36px;
      line-height: 36px;
      text-align: left;
      padding-left: 18px;
      span {
        vertical-align: middle;
      }
      .icon {
        vertical-align: middle;
        width: 20px;
        margin-left: 10px;
      }
    }
    .chart-item {
      width: 100%;
      height: 100px;
    }
  }
}
</style>
